{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{pluResPath}}tops/groupRank.css"/>
{{/block}}

{{set mode = box ? '宝箱' : '成就'}}

{{block 'main'}}
<div class="sb-head">
    <h1>○#{{mode}}排行榜<br>○上榜请先通过【#{{mode}}排行】指令来写入数据</h1>
</div>
<div class="sb-box">
    <div class="topLeadersList">
        {{each tops top}}
        <div class="leader">
            <div class="containerImage">
                <img class="image" src="https://q1.qlogo.cn/g?b=qq&nk={{ top.qq }}&s=160">
                <div class="crown">
                    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
                        <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                    </svg>
                </div>
                <div class="quantity">{{top.total_index}}</div>
            </div>
        </div>
        {{/each}}
    </div>
    <div class="playlist">
        {{if !box}}
        <div class="table" style="grid-template-columns: 0.6fr 1.5fr 1fr 1.5fr 1fr 1fr;">
            <div>Top</div>
            <div>Info / UID</div>
            <div style="color: #e9ef11">全服Top</div>
            <div>达成成就 / 总成就</div>
            <div>得分</div>
            <div>称号</div>
        </div>
        <div class="list">
            {{each rankData member}}
            <div class="player" style="grid-template-columns: 0.6fr 1.5fr 1fr 1.5fr 1fr 1fr;"><span> {{member.rank}} </span>
                <div class="user">
                    <img class="image" src="https://q1.qlogo.cn/g?b=qq&nk={{ member.qq }}&s=160"><span> {{member.uid}} </span>
                </div>
                <span style="color: #e9ef11"> {{member.total_index}} </span><span> {{member.achievement_number}} / {{achievement}}</span><span> {{member.grade}} </span><span> {{member.title}} </span>
            </div>
            {{/each}}
        </div>
        {{else}}
        <div class="table" style="grid-template-columns: 0.6fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
            <div>Top</div>
            <div>Info / UID</div>
            <div style="color: #0feddb">全服Top</div>
            <div>得分</div>
            <div>华丽</div>
            <div>珍贵</div>
            <div>精致</div>
            <div>普通</div>
            <div>总计</div>
        </div>
        <div class="list">
            {{each rankData member}}
            <div class="player" style="grid-template-columns: 0.6fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;"><span> {{member.rank}} </span>
                <div class="user">
                    <img class="image" src="https://q1.qlogo.cn/g?b=qq&nk={{ member.qq }}&s=160"><span> {{member.uid}} </span>
                </div>
                <span style="color: #0feddb"> {{member.total_index}} </span><span> {{member.grade}} </span><span> {{member.luxurious}} </span><span> {{member.precious}} </span><span> {{member.exquisite}} </span><span> {{member.common}} </span><span> {{member.total_box}} </span>
            </div>
            {{/each}}
        </div>
        {{/if}}
    </div>
</div>
{{/block}}